<template>
  <div>
    <div class="bei">
      <i class="el-icon-arrow-left yi" @click="$router.back()"></i>
      <van-search
    class="search"
    left='16516'
  v-model="value1"
  shape="round"
  background="#4fc08d"
  placeholder="输入小区或地址"
/>
<i class="el-icon-location-outline er"></i>
  </div>

  <van-dropdown-menu>
  
  <van-dropdown-item title="全部商品" ref="item">
    <div style="padding: 5px 16px;">
      <van-button type="danger" block round >
        确认
      </van-button>
    </div>
  </van-dropdown-item>
  <van-dropdown-item title="方式" ref="item">
    <div style="padding: 5px 16px;">
      <van-button type="danger" block round >
        确认
      </van-button>
    </div>
  </van-dropdown-item>
  <van-dropdown-item title="租金" ref="item">
    <div style="padding: 5px 16px;">
      <van-button type="danger" block round >
        确认
      </van-button>
    </div>
  </van-dropdown-item>
  <van-dropdown-item title="筛选" ref="item">
    <div style="padding: 5px 16px;">
      <van-button type="danger" block round >
        确认
      </van-button>
    </div>
  </van-dropdown-item>
</van-dropdown-menu>
   
   <div class="da">
    <div class="xiao" v-for="item in list" :key="item.houseCode">
      <div class="tu">
        <img v-lazy='item.houseImg'>
      </div>
      <div class="txt">
        <div class="title">
          <p>
          <strong>{{item.title}}</strong>
        </p>
        </div>
        <span>{{item.desc}}</span><br>
        <div class="jin">
          <i>{{item.tags[0] || item.tags[1]}}</i>
        </div>
        <span class="moey">
         <strong>{{item.price}}</strong><i class="yuan">元/月</i>
        </span>
      </div>
    </div>
   </div>
  </div>
</template>

<script>
export default {
  name: 'HaokeHousing',

  data() {
    return {
      value1:'',
      value: 0,
      switch1: false,
      switch2: false,
      list:[]
    };
    
  },
  created(){
    this.getList()
  },
  mounted() {
    
  },

  methods: {
    async getList(){
      const res = await this.$http.get('/houses')
      console.log(res);
      this.list = res.data.body.list
    }
  },
};
</script>

<style lang="less" scoped>
.bei {
  background-color: #4fc08d;
  height: 60px;
  line-height: 60px;
  display: flex;
  align-items: center;
  .search {
    margin-left: -10px;
  // position: relative;
  width: 90%;
}
  .yi {
    font-size: 25px;
    color: #fff;
  }
  .er {
    font-size: 25px;
    color: #fff;
    position: relative;
    right: 5px;
  }
}
.da {
  padding: 0 10px 0 10px;
  // background-color: pink;
  // height: 60px;
  .xiao {
    display: flex;
   .tu {
       img {
         width: 120px;
         height: 80px;
       }
     }
     .txt {
      margin-left: 20px;
      width: 60%;
      .title {
        margin-top: -10px;
        width:100%;
        height: 60px;
        p {
        font-size: 15px;
      }
      }
      span {
        position: relative;
        top: -20px;
        font-size: 12px;
        color: #b7b9d2;
      }
      .jin {
        position: relative;
        top: -15px;
        width: 40px;
        height: 20px;
        background-color: #e1f5f8;
        i {
          font-size: 12px;
          color: #39c3d9;
        }
      }
      .moey {
        font-size: 18px;
        color: #fa5741;
        position: relative;
        top: -15px;
        .yuan {
          font-size: 12px;
        }
      }
     }
  }
  
}
</style>